// 父子组件传值
// 参考https://react.docschina.org/docs/context.html
import React, { Component,Fragment,createContext } from 'react'

// 方法包含两个组件Provider提供者和Consumer消费者)
console.log(createContext())
// 如果需要使用createContext需要解构出啦
const {
    // 下面两个组件包裹的对象（children）必须为函数类型（Provider用于提供状态，Consumer用于接收状态）
    Provider,
    // 解构出来重新复制给CounterConsumer
    Consumer: CounterConsumer //Consumer 可以消费Provider提供的共享数据 重新解析出来指向命名为CounterConsumer
} = createContext()
// 提供数据共享的组件，组件需要使用Provider包裹
class CounterProvider extends Component {
    constructor(){
        super()
        // 定义共享数据对象
        this.state = {
            count: 101
        }
    }
    // 定义两个修改共享数据对象的函数
    incrementfnProvider = () => {
        this.setState({
            count: this.state.count+1
        })
    }
    decrementfnProvider = () => {
        this.setState({
            count: this.state.count-1
        })
    }

    render() {
        return (
            // Provider有个value 可以接收任意参数，可以式对象
            <Provider value={
                //参数对象
                {
                    count: this.state.count,
                    // 传递函数类型参数
                    incrementfn: this.incrementfnProvider,
                    decrementfn: this.decrementfnProvider
                }
            }>
                {this.props.children}
            </Provider>
        )
    }
}


// 顶级父组件
export default class MyContextComponent extends Component {
    render() {
        return (
            // 所有被CounterProvider包裹的组件，CounterProvider的状态都是共享的
            <CounterProvider>
                {/* 通过children传递运算符号 */}
                <CountBtn type="decrement">-</CountBtn>
                <Counter />
                <CountBtn type="increment">+</CountBtn>
            </CounterProvider>
        )
    }
} 

// 子（计算组件）
class CountBtn extends Component {
    render() {
        return (
            // 获取元素中间传递的值（例如+和-的符合）
            // <button>{this.props.children}</button>
            <CounterConsumer>
                {
                    ({incrementfn, decrementfn}) => { //(ctx) 可以直接把请求对象全部参数，通过log看和调式，正常用就解构需要的
                        // 通过组件的属性值判断按钮的类型，进行函数选择赋值调用
                        const handler = this.props.type === 'increment' ? incrementfn:decrementfn
                        return <button onClick={handler}>{this.props.children}</button>
                    }
                }
            </CounterConsumer>
        )
    }
}

// 子组件，显示计算结构的
class Counter extends Component {
    render() {
        return (
            // 在给Consumer传递的函数会回传一个参数对象（任意类型），该参数式上面Provider的value传递的
            <CounterConsumer>
                {
                   // (args) => {
                   //     console.log("CounterConsumer(Consumer)获取的共享数据=",args)
                   ({count}) => { // 也可以直接把需要的值解构出来
                        //return <span>{10}</span>
                        return <span>{count}</span>
                    }
                }
            </CounterConsumer>
        )
    }
}


